Жду критику верстки :)

[iillyyaa2]

вот такую вёрстку тут сделали, хотел бы выслушать вашу критику..

что мне не понравилось я напишу позже

кликать можно в верхнее поле "Регистрация"

попробуйте поменять размеры окна

http://rebutovo.ru/p/index.htm

ЗЫ делал не я

[DrStrangeLove]

Видно, недоделали... - по стрелкам нажимаю и никакого эффекта!

Иконки соцсетей можно было в спрайт засунуть - благо они все по 43х43...

ЗЫ делал не я

А кто?? Друзья?? Какой смысл выставлять на обсуждение не своё??

Edited June 7, 2011 by DrStrangeLove

[bobo]

В "Регистрации" не видно капчи. Opera 11.11

[iillyyaa2]

Видно, недоделали... - по стрелкам нажимаю и никакого эффекта!

Это макет, дальше делать мне.. там работает только "Регистрация" (выезжание блока на яве)

А кто?? Друзья?? Какой смысл выставлять на обсуждение не своё??

я занимаюсь разработкой движка на пхп, мне дали первую свёрстанную страницу, мне она не понравилась и теперь у нас спор идёт

лично мне не нравится:

- названия классов и id: bg_x1, bg_x2

- блок регистрации лежит в другом контейнере по сравнению с блоком "вход" хотя блоки замещают друг друга, а лежат в разных контейнерах.

- блок с надписью "ПРЯНИК" находится вне блока "Вход" хотя логичнее и проще было его засунуть в "Вход" и позиционировать вместе

- то как плавает "весь контейнер" при изменении размера окна

- написание стилей в такой форме:

#content .login .blck .inp input {

(я лично не вижу великого смысла перечислять все контейнеры в которые было вложено, назови нормально контейнер с инпутами и управляй его содержимым.

к примеру захочу я вывести форму регистрации или входа на любой другой странице, и что ? мне писать заного стиль ?)

Edited June 8, 2011 by iillyyaa2

[iillyyaa2]

В "Регистрации" не видно капчи. Opera 11.11

там просто место зарезервированно под капчу, пока просто блок вместо неё

[buddah]

Понравились кнопки соц сетей, как всегда не понравился дизайн. Я вздохну с облегчением, когда дезигнеры рунета перестанут везде пихать свои цветочки\листочки.

Много фонов-картинок. Даже при моей скорости 20Мбит я наблюдал прорисовку.

Зачем столько пустого места вокруг Входа? Это на минимализм не похоже, просто дыры.

Юзабиллити не продумано. Долго тыкал на строчки слева от Тема и справа от Сообщества думая, что это поля для ввода.

Кнопку поиска так и не понял.

По коду ничего говорить не буду, есть люди и поопытней меня в этом аспекте.

Edited June 8, 2011 by buddah

[Great Rash]

Верстка фиговая..

<div class="rStrok">
  <p class="rtxt">Ник:</p>
  <p class="rinp"><input type="text" name="nick" /></p>
</div>

Зачем тут параграфы? "Ник" - это явно <label>. Оборачивать <input> в параграф вообще извращение.

<div class="bg_reg">
Регистрация</div>

Зачем тут параграф?

<p class="clear"></p>

Многие говорят что использовать класс clear - очень плохо (даже некоторые ненавидят тех верстальщиков, которые так делают). Я спокойно отношусь к таким вещам и даже считаю, что в некоторых случаях это лучший способ очистки потока. Но причем тут параграф!?

<div class="soobsa">
<a href="#"><img src="images/img_x2.png" /></a>
<a href="#">Games</a></div>

Кругом параграфы! OMG, зачем?

UPD:

<div id="footer" class="bg_x4">
  <div class="icons">
    <a href="#" class="ief"><img src="images/0x.gif" width="43" height="43" class="facebook" /></a>
    <a href="#" class="iet"><img src="images/0x.gif" width="43" height="43" class="twitter" /></a>
    <a href="#" class="iey"><img src="images/0x.gif" width="43" height="43" class="youtube" /></a>
    <a href="#" class="iev"><img src="images/0x.gif" width="43" height="43" class="vkontakte" /></a>
    <a href="#" class="ier"><img src="images/0x.gif" width="43" height="43" class="rss1x" /></a>
  </div>
</div>

Лишний <div>.

[psywalker]

Great Rash

<div class="rStrok">

<p class="rtxt">Ник:</p>

<p class="rinp"><input type="text" name="nick" /></p>

</div>

Оборачивать <input> в параграф вообще извращение.

Раньше такое практиковалось часто, делалось ради того, чтобы при отключённых стилях поле было на отдельной строке.

<p class="clear"></p>

Многие говорят что использовать класс clear - очень плохо (даже некоторые ненавидят тех верстальщиков, которые так делают). Я спокойно отношусь к таким вещам и даже считаю, что в некоторых случаях это лучший способ очистки потока.

Вот тоже считаю, что это грязь, и мало того, мне ни разу вообще не приходилось использовать эту вещь, ни разу! Считаю, что если ты знаешь своё дело на отлично, то всегда сможешь решить эту проблему правильным, красивым путём.

Но причем тут параграф!?

Кстати с точки зрения семантики - пофиг, div - сюда тоже не подходит, <p> даже короче, и менее избыточен, чем div. Думаю это дело вкуса и моды, моднее юзать div, но это не означает, что это правильно.

UPD:

<div id="footer" class="bg_x4">

<div class="icons">

<a href="#" class="ief"><img src="images/0x.gif" width="43" height="43" class="facebook" /></a>

<a href="#" class="iet"><img src="images/0x.gif" width="43" height="43" class="twitter" /></a>

<a href="#" class="iey"><img src="images/0x.gif" width="43" height="43" class="youtube" /></a>

<a href="#" class="iev"><img src="images/0x.gif" width="43" height="43" class="vkontakte" /></a>

<a href="#" class="ier"><img src="images/0x.gif" width="43" height="43" class="rss1x" /></a>

</div>

</div>

Лишний <div>.

А я бы списочек забацал пожалуй.

[Vlad]

Всё смешалось у верстальщика в голове. Стоит доктайп HTML4.01, ещё и переходный, однако синтаксис XHTML. При этом не соблюдаются даже основные принципы соблюдения валидности. Вы уж решите, что хотите. XHTML - так пишите на XHTML. HTML, так делайте на нём. Если не понимаете разницу между ними, начните с чего-то одного, а лучше с чтения книжек.

[iillyyaa2]

Всё смешалось у верстальщика в голове. Стоит доктайп HTML4.01, ещё и переходный, однако синтаксис XHTML. При этом не соблюдаются даже основные принципы соблюдения валидности. Вы уж решите, что хотите. XHTML - так пишите на XHTML. HTML, так делайте на нём. Если не понимаете разницу между ними, начните с чего-то одного, а лучше с чтения книжек.

меня это тоже позабавило, но на вопрос, почему такой доктайп, я получил ответ "гоу в гугл"

а что скажите насчёт моих придирок ? которые я озвучил в 4 посте ?

[psywalker]

Всё смешалось у верстальщика в голове. Стоит доктайп HTML4.01, ещё и переходный, однако синтаксис XHTML. При этом не соблюдаются даже основные принципы соблюдения валидности. Вы уж решите, что хотите. XHTML - так пишите на XHTML. HTML, так делайте на нём. Если не понимаете разницу между ними, начните с чего-то одного, а лучше с чтения книжек.

меня это тоже позабавило, но на вопрос, почему такой доктайп, я получил ответ "гоу в гугл"

И правильно получил, ведь нельзя ж использовать то, о чём ты даже не имеешь ни малейшего представления, сначала теория, а потом уже практика!

[iillyyaa2]

И правильно получил, ведь нельзя ж использовать то, о чём ты даже не имеешь ни малейшего представления, сначала теория, а потом уже практика!

ты не понял, эту вёрстку делал человек, принимая её, я верстальщику задал вопрос, почему он использовал именно такой доктайп. но ответа не получил

[Great Rash]

Кстати с точки зрения семантики - пофиг, div - сюда тоже не подходит, <p> даже короче, и менее избыточен, чем div. Думаю это дело вкуса и моды, моднее юзать div, но это не означает, что это правильно.

Ничо не пофиг, <span> сюда подошел бы лучше всего. Он не несет абсолютно никакой семантической нагрузки.

Вот тоже считаю, что это грязь, и мало того, мне ни разу вообще не приходилось использовать эту вещь, ни разу! Считаю, что если ты знаешь своё дело на отлично, то всегда сможешь решить эту проблему правильным, красивым путём.

Красивым это каким? ::after плюс expression для ИЕ? Этот способ во много раз хуже чем просто <span class="clear">. Больше способов очистить поток, не применяя overflow не знаю.

Раньше такое практиковалось часто, делалось ради того, чтобы при отключённых стилях поле было на отдельной строке.

<br /> - при отключенных стилях пропадет что-ли?

[psywalker]

И правильно получил, ведь нельзя ж использовать то, о чём ты даже не имеешь ни малейшего представления, сначала теория, а потом уже практика!

ты не понял, эту вёрстку делал человек, принимая её, я верстальщику задал вопрос, почему он использовал именно такой доктайп. но ответа не получил

Да вёрстка говно полное, о каком доктайпе ещё может идти речь.

Great Rash

Кстати с точки зрения семантики - пофиг, div - сюда тоже не подходит, <p> даже короче, и менее избыточен, чем div. Думаю это дело вкуса и моды, моднее юзать div, но это не означает, что это правильно.

Ничо не пофиг, <span> сюда подошел бы лучше всего. Он не несет абсолютно никакой семантической нагрузки.

А какая разница между span и div, если оба они предназначены совсем для другого?

Красивым это каким? ::after плюс expression для ИЕ? Этот способ во много раз хуже чем просто <span class="clear">. Больше способов очистить поток, не применяя overflow не знаю.

Причём тут вообще expression ? Есть zoom: 1; для этих целей, height: 1% на крайняк и всё прекрасно пашет. О expression даже и речи не идёт.

<br /> - при отключенных стилях пропадет что-ли?

Нет, но заключение поля в параграфы более надёжный способ, так как при изменении структуры <br /> легче забыть, чем поставить, а параграфы более надёжные в этом плане.

НО я не говорю, что это правильно, вообще тоже против такого.

[Great Rash]

А какая разница между span и div, если оба они предназначены совсем для другого?

Для чего по-твоему <span>?

[psywalker]

А какая разница между span и div, если оба они предназначены совсем для другого?

Для чего по-твоему <span>?

Да тоже собственно не для чего, так вспомогательный строчный элемент, не несущий в себе никакой семантики.

[Great Rash]

Ну вот он и поможет очистить поток

[psywalker]

Ну вот он и поможет очистить поток

Да это понятно, но с такой же помощью может справиться и <i>

А потом опять же, могу тебе привести пример, как правильно с моей точки зрения очищать поток, вместо грязного способа.

Вот тут зацени например: http://www.xiper.net/collect/html-and-css-tricks/css-tricks/clearfix.html

[Great Rash]

Да знаю я про это. Но есть одно "но", нам нужно создавать дополнительный файл и дополнительные правила для ИЕ. А просто со спаном ничего этого не нужно.

а что скажите насчёт моих придирок ? которые я озвучил в 4 посте ?

лично мне не нравится:

- названия классов и id: bg_x1, bg_x2

- блок регистрации лежит в другом контейнере по сравнению с блоком "вход" хотя блоки замещают друг друга, а лежат в разных контейнерах.

- блок с надписью "ПРЯНИК" находится вне блока "Вход" хотя логичнее и проще было его засунуть в "Вход" и позиционировать вместе

- то как плавает "весь контейнер" при изменении размера окна

- написание стилей в такой форме:

#content .login .blck .inp input {

(я лично не вижу великого смысла перечислять все контейнеры в которые было вложено, назови нормально контейнер с инпутами и управляй его содержимым.

к примеру захочу я вывести форму регистрации или входа на любой другой странице, и что ? мне писать заного стиль ?)

1) Названия классов можно было б и поинформативнее, но в принципе и так пойдет, ясно же что это бекграунд 1 и 2. От ID я бы отказался совсем.

2) Мысль не уловил, что кого замещает не понятно.

3) На счет пряника не знаю, сложно судить по одной странице какую функцию выполняет блок.

4) Нормально он плавает, т.е. я вижу что он посередине стоит все время (Хром), может в каком-то определенном браузере и плавает хз.

5) Да, это зло. Надо от такого отказываться обязательно.

[mishka]

Похоже что вы впервые работали с этим верстальщиком.

Может вам нужно было сначала обговорить все детали, и это избавило бы вас от недопонимания?

Хаять тут чужую работу все гаразды, на этом форуме ( как показывает практика ) людей хлебом не корми - дай покритиковать, и по делу и просто так.

то что блоки располагаются не в тех местах (по коду) где вам удобно - так это можно поправить, верстальщик то незнает где вам удобнее что вывести.

#content .login .blck .inp input - зло в чистом виде

[iillyyaa2]

2) Мысль не уловил, что кого замещает не понятно.

3) На счет пряника не знаю, сложно судить по одной странице какую функцию выполняет блок.

4) Нормально он плавает, т.е. я вижу что он посередине стоит все время (Хром), может в каком-то определенном браузере и плавает хз.

2 - форма "Вход" и форма "Регистрация" показывается или одно, или другое.. в одном и том же месте... грубо говоря, если делать 2 страницы, 1 вход, вторая регистрация, то вместо одного блока будет другой...

так вот они расположены в разных контейнерах.. и что бы были видны им прописан z-index

пропиши их в одном блоке, один за другим, и не нужен будет и z-index, код будет читабельнее, и проще его выводить из php

3 - картинка "Пряник" выводится только на этой странице и нигде больше, эта картинка даже не присутствует на форме "регистрация" и логично было бы засунуть её в единый блок к форме входа.. а не позиционировать отдельно..

(кстати на 1 пиксель по горизонтали он промахнулся... я когда засунул блок внутрь "Входа", "Пряник" стал ровнее, а я ведь ничего не прописывал кроме того, что блоки там align=center. тоесть я сделал меньше работы и получил точнее результат)

4 - ты измени размер окна, к примеру на весь экран растяни, потом обратно в оконный режим (там задержка пара секунд)

ЗЫ не я нанимал верстальщика, его вообще наняли без моего ведома, меня поставили перед фактом, когда был готов макет.

то что блоки располагаются не в тех местах (по коду) где вам удобно - так это можно поправить, верстальщик то незнает где вам удобнее что вывести.

я тоже так думал, пытался обсудить это... но ответ верстальщика:

кароче делай чё хочешь умник, не устаивает, поплачь, полегчает.... свою политику держи при себе, не навязывай свои взгляды.

а заказчик теперь не может понять, кто прав, а кто нет

переделывать каждую страницу за ним я тоже не хочу.. особенно разбирать его стили #content .login .blck .inp input

[Great Rash]

2 - форма "Вход" и форма "Регистрация" показывается или одно, или другое.. в одном и том же месте... грубо говоря, если делать 2 страницы, 1 вход, вторая регистрация, то вместо одного блока будет другой...

так вот они расположены в разных контейнерах.. и что бы были видны им прописан z-index

пропиши их в одном блоке, один за другим, и не нужен будет и z-index, код будет читабельнее, и проще его выводить из php

Согласен.

3 - картинка "Пряник" выводится только на этой странице и нигде больше, эта картинка даже не присутствует на форме "регистрация" и логично было бы засунуть её в единый блок к форме входа.. а не позиционировать отдельно..

Тогда да, было бы логичней. Но знал ли об этом верстальщик?

4 - ты измени размер окна, к примеру на весь экран растяни, потом обратно в оконный режим (там задержка пара секунд)

Задержку не наблюдаю. 100 миллисекунд не считается

UPD:

переделывать каждую страницу за ним я тоже не хочу.. особенно разбирать его стили #content .login .blck .inp input

Варианта два:

1) переделать за него и посоветовать заказчику больше не работать с этим человеком и впредь обсуждать верстку с вами.

2) отказаться от работы пока верстка не будет переделана.

Я бы выбрал первое. Судя по ответу верстальщика, работать с ним дальше не стоит.

[klierik]

<p class="clear"></p>

прошлый век.

Вёрстка на 3+.

Нечего смотреть.

[psywalker]

Great Rash

Да знаю я про это. Но есть одно "но", нам нужно создавать дополнительный файл и дополнительные правила для ИЕ. А просто со спаном ничего этого не нужно.

Ой, да ладно тебе, скажешь тоже, дополнительный файл... Тут главное - это правильная структура, без лишнего хлама, + такие вещи проблемы уже давно свободно решаются на чистом CSS и я считаю это верным подходом, и тут игра стоит свеч 100%. Мы просто делаем один раз селектор .clearfix и вешаем его потом на нужные элементы, вот и всё.

<p class="clear"></p>

прошлый век.

Вёрстка на 3+.

Нечего смотреть.

На 3+??? Это ты за что так приподнял человека?

[mishka]

я тоже так думал, пытался обсудить это... но ответ верстальщика:

кароче делай чё хочешь умник, не устаивает, поплачь, полегчает.... свою политику держи при себе, не навязывай свои взгляды.

Это не есть хорошо.

Немного выше Great Rash уже предложил варианты.